<template>
  <div class="node_page">
    <!-- 头部导航 -->
    <CommonHeader title="节点认购" @records="goPage">
      <template v-slot:right>
        <img src="@/assets/common/record_icon.png" alt="" />
      </template>
    </CommonHeader>
    <!-- 节点主体 -->
    <div class="node_content page_no_tab_bar">
      <!-- 节点信息 -->
      <div class="node_process">
        <div class="title">价格：20000 USDT</div>
        <div class="remain">
          <span>剩余999个</span>
          <span>100%</span>
        </div>
        <div class="dot">
          <el-steps :active="4" align-center>
            <el-step v-for="item in 5" :key="item" />
          </el-steps>
        </div>
        <div class="balance">余额：00000</div>
        <div class="operate_btn">认购</div>
      </div>
      <!-- 节点权益 -->
      <div class="node_right">
        <div class="right_title">
          <div>
            <img src="@/assets/common/node_right_icon.png" alt="" />
          </div>
          <div>【节点权益】</div>
        </div>
        <ul class="right_content">
          <li>
            1.送价值2000 USD，FCA代币。共计：20万枚，锁仓10个月，每个月释放10%。
          </li>
          <li>2.送提现手续费50%加权分红。</li>
          <li>3.送直推10% USD收益。</li>
          <li>4.送在RWA交易所企业发币权益。</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonHeader from "@/components/CommonHeader.vue";
import { useRouter } from "vue-router";

// 获取路由对象
const router = useRouter();

// 跳转节点记录页
const goPage = () => {
  router.push("/nodeRecords");
};
</script>

<style lang="scss" scoped>
.node_page {
  .node_content {
    padding-top: 10px;
    .node_process {
      border: 1px solid #292c2f;
      border-radius: 15px;
      background-color: #141515;
      padding: 20px 10px;
      .title {
        font-size: 20px;
        color: #2EBD85;
      }
      .remain {
        display: flex;
        justify-content: space-between;
        margin: 15px 0;
        margin-bottom: 40px;
        span:last-child {
          color: #2EBD85;
        }
      }
      .balance {
        margin: 20px 0;
        margin-top: 50px;
      }
    }
    .node_right {
      margin-top: 20px;
      .right_title {
        display: flex;
        color: #4ea1ff;
        div {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 5px;
        }
      }
      .right_content {
        margin-block-start: 10px;
        li {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
